<template>
  <view class="su-container">
    <nut-navbar
      :title="showTitle ? title || route.query.title || route.meta.title : ''"
      :leftShow="leftShow || route.meta.isBack"
      :leftText="leftText"
      :titleIcon="titleIcon"
      :border="border"
      :desc="desc"
      :fixed="fixed"
      :placeholder="placeholder"
      :safeAreaInsetTop="safeAreaInsetTop"
      :z-index="zIndex"
      @clickTitle="clickTitle"
      @clickIcon="clickIcon"
      @clickRight="clickRight"
      @clickBack="toBack"
      v-on="onEvents"
    >
      <template v-for="slot in Object.keys($slots)" #[slot]="scope">
        <slot v-bind="scope" :name="slot"></slot>
      </template>
    </nut-navbar>
    <view class="su-container__content">
      <slot></slot>
    </view>
  </view>
</template>

<script setup>
import { useEvents } from '@/supreme/core';
import { useRoute, useRouter } from 'vue-router';
defineOptions({
  name: 'SuContainer'
});
const props = defineProps({
  title: {
    type: String,
    default: undefined
  },
  leftText: {
    type: String,
    default: undefined
  },
  desc: {
    type: String,
    default: undefined
  },
  showTitle: {
    type: Boolean,
    default: true
  },
  leftShow: {
    type: Boolean,
    default: false
  },
  titleIcon: {
    type: Boolean,
    default: false
  },
  border: {
    type: Boolean,
    default: false
  },
  fixed: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: Boolean,
    default: false
  },
  safeAreaInsetTop: {
    type: Boolean,
    default: true
  },
  zIndex: {
    type: Number
  },
  clickTitle: {
    type: Function
  },
  clickIcon: {
    type: Function
  },
  clickRight: {
    type: Function
  },
  clickBack: {
    type: Function
  }
});
const route = useRoute();
const router = useRouter();
const emit = defineEmits(['click-title', 'click-icon', 'click-right', 'click-back']);

const onEvents = computed(() => {
  const events = ['click-title', 'click-icon', 'click-right', 'click-back'];
  return useEvents({ props, events, emit });
});
const toBack = () => {
  if (props.clickBack) {
    props.clickBack();
  } else {
    router.back();
  }
};
</script>

<style lang="scss">
.su-container {
  @include wh(100vw, 100vh);
  @include flex(column nowrap);
  .nut-navbar {
    font-weight: 700;
    --nut-navbar-height: 44px;
    --nut-navbar-color: #000;
    --nut-navbar-title-font: 16px;
    --nut-navbar-title-font-color: #000;
    --nut-navbar-title-font-weight: 700;
    --nut-icon-line-height: 16px;
    .nut-icon {
      @include wh(16px!important, 16px!important);
    }
    &__title {
      flex: 1;
    }
  }
  &__content {
    @include wh(100vw);
    overflow-y: auto;
    flex: 1;
  }
}
</style>
